<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../global.js"></script>
    <style>
        #box {
            width: 100px;
            height: 150px;
            position: absolute;
            top: 300px;
            left: 0;
        }
        ul{
            list-style: none;
            position: fixed;
            top: 300px;
            right: 100px;
        }
        ul li{
            width: 50px;
            height: 25px;
            background-color: #26ff00;
            border: 1px solid azure;
        }
        .active{
            background-color: #238FCE;
        }
        #cmain div{
            width: 100%;
            height: 100%;
            font-size: 48px;
        }
    </style>
</head>
<body style="height: 9999px">
<div id="cmain">
    <div>首页</div>
    <div>导航</div>
    <div>精选</div>
    <div>直播</div>
    <div>底部</div>
</div>
<img id="box" src="../基础练习/img/1.jpg">
<ul id="uls">
    <li>首页</li>
    <li>导航</li>
    <li>精选</li>
    <li>直播</li>
    <li>底部</li>
</ul>
<script>
   window.onload=function () {
       //左边图片效果
       var box = document.getElementById('box');
       var btop=box.offsetTop;

       // 右边导航栏效果
       var uls=document.getElementById('uls');
       var lis=uls.getElementsByTagName('li');
       var conten=document.getElementById('cmain');
       var divs=conten.children;
       var dtop=document.documentElement.clientHeight;
       var dtops=dtop;

       var isClick=false;

       var color=['red','yellow','pink','blue','green'];
       for (let i = 0; i < divs.length; i++) {
           divs[i].style.backgroundColor=color[i];
           divs[i].style.height=dtop+'px';
       }
       for (let x = 0; x < lis.length; x++) {
           lis[x].onclick=function () {
               isClick=true;
               var st=divs[x].offsetTop+5;
               // dtops=dtop*x;
               document.documentElement.scrollTop=st;
               for (let k = 0; k < lis.length; k++) {
                   lis[k].classList.remove('active');
               }
               this.className='active';
               // widthAnimtion(document.documentElement,dtops,'scrollTop');
               isClick=false;
           }

       }


       window.onscroll=function () {
           //左
           var stop=document.documentElement.scrollTop||document.body.scrollTop;
           widthAnimtion(box,btop+stop,'top');

           //右
           
           if (!isClick){
               for (let i = 0; i < lis.length; i++) {
                   if (stop>divs[i].offsetTop){
                       for (let c = 0; c < lis.length; c++) {
                           lis[c].classList.remove('active');
                       }
                       lis[i].className='active';
                   }
               }
           }
       }



   }
</script>
</body>
</html>